<!DOCTYPE html>
<html>
<head>
	<title>三栏自适应</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.left, 
		.right {
			width: 100px;
			height: 100px;
			background-color: red;
		}
		.middle {
			height: 200px;
			background-color: blue;
		}
		

		/* 浮动布局
			1. 注意书写的顺序， 左浮元素 右浮动元素 中间元素
			2. 中间元素添加overflow: hidden;
		 */
		.left1 {
			float: left;
		}
		.right1 {
			float: right;
		}
		.middle1 {
			overflow: hidden;
		}


		/*flex布局*/
		.content2 {
			display: flex;
			flex-direction: row;
		}
		.middle2 {
			flex: 1;
		}


		/*table布局*/
		.content3 {
			display: table;
			width: 100%;
			height: 100%;
		}
		.left3,
		.middle3, 
		.right3 {
			display: table-cell;
		}


		/*position定位*/
		.content4 {
			position: relative;
		}
		.left4,
		.right4,
		.middle4 {
			position: absolute;
		}
		.left4 {
			left: 0;
		}
		.right4 {
			right: 0;
		}
		.middle4 {
			left: 100px;
			right: 100px;
		}


		/*grid布局*/
		.content {
			display: grid;
			grid-template-columns: 100px auto 100px;
		}
	</style>
</head>
<body>
<div class="content">
	<div class="left"></div>
	<div class="middle"></div>
	<div class="right"></div>
</div>
</body>
</html>